<script setup lang="ts">
import {
  deleteCollectionAPI,
  getDonationByIdAPI,
  postAddCollectionAPI,
  putLockDonationAPI,
} from '@/services/donationDetail'
import { donationTypeStore } from '@/stores/modules/donationType'
import type { DonationType, DonationVo } from '@/types/home'
import { onLoad } from '@dcloudio/uni-app'
import { ref, computed } from 'vue'

const query = defineProps<{
  donationId: number
}>()
const donationTypes = donationTypeStore().donationTypes //从持久层中获取捐赠物种类集合
// 物品详情数据
const donationDetail = ref<DonationVo>()
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// 是否显示确认弹窗
const showConfirmModal = ref(false)

// 计算当前捐赠物的类型名称
const donationTypeName = computed(() => {
  if (!donationDetail.value || !donationTypes) return '未知类型'

  const typeItem = donationTypes.find((item) => item.id === donationDetail.value?.categoryId)
  return typeItem ? typeItem.typeName : '未知类型'
})

//获取捐赠物详情
const getDonationDetailData = async () => {
  const res = await getDonationByIdAPI(query.donationId)
  donationDetail.value = res.data
}
onLoad(() => {
  getDonationDetailData()
})

// 回退按钮处理
const handleBack = () => {
  uni.navigateBack()
}

// 预览大图
const handlePreviewImage = (index: number) => {
  const imageUrls = donationDetail.value?.images.split(',') || []
  if (imageUrls.length > 0) {
    uni.previewImage({
      current: imageUrls[index], // 当前显示图片的url
      urls: imageUrls, // 需要预览的图片链接列表
      indicator: 'number', // 显示页码指示器
      loop: true, // 是否循环预览
      longPressActions: {
        // 长按图片显示操作菜单
        itemList: ['保存图片', '分享'],
        success: function (data) {
          // 根据返回的index处理长按菜单的选择
          if (data.tapIndex === 0) {
            // 保存图片
            uni.saveImageToPhotosAlbum({
              filePath: imageUrls[index],
              success: function () {
                uni.showToast({
                  title: '保存成功',
                  icon: 'success',
                })
              },
              fail: function () {
                uni.showToast({
                  title: '保存失败',
                  icon: 'none',
                })
              },
            })
          }
        },
      },
    })
  }
}

// 收藏按钮点击处理
const handleCollect = async () => {
  if (donationDetail.value?.isCollect === 0) {
    const res = await postAddCollectionAPI(query.donationId)
  } else {
    const res = await deleteCollectionAPI(query.donationId)
  }
  uni.showToast({
    title: donationDetail.value?.isCollect == 0 ? '收藏成功' : '取消收藏',
    icon: 'none',
  })
  getDonationDetailData()
}

// 处理"我想要"按钮点击
const handleWantIt = () => {
  // 显示自定义确认弹窗
  showConfirmModal.value = true
}

// 确认想要
const confirmWantIt = () => {
  // 关闭弹窗
  showConfirmModal.value = false
  // 调用锁定API
  lockDonation()
}

// 锁定捐赠物
const lockDonation = async () => {
  try {
    uni.showLoading({
      title: '处理中...',
      mask: true,
    })

    const res = await putLockDonationAPI(query.donationId)

    uni.hideLoading()

    if (res.code === 200) {
      uni.showToast({
        title: '锁定成功',
        icon: 'success',
      })

      // 刷新数据
      getDonationDetailData()

      // 返回上一页或其他操作
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    } else {
      uni.showToast({
        title: res.msg || '操作失败',
        icon: 'none',
      })
    }
  } catch (error) {
    uni.hideLoading()
    uni.showToast({
      title: '网络异常，请重试',
      icon: 'none',
    })
  }
}
</script>
<template>
  <view class="detail-page">
    <!-- 自定义导航栏 -->
    <view class="custom-nav" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
      <view class="nav-content">
        <view class="nav-left" @click="handleBack">
          <text>&#8592;</text>
        </view>
        <!-- 捐赠人信息 -->
        <view class="donor-info">
          <image class="donor-avatar" :src="donationDetail?.userImage" mode="aspectFill"></image>
          <view class="donor-name">{{ donationDetail?.donorName }}</view>
        </view>
        <view class="nav-right">
          <text class="iconfont icon-more"></text>
        </view>
      </view>
      <!-- 添加分割线 -->
      <view class="nav-divider"></view>
    </view>

    <!-- 页面内容区域 -->
    <scroll-view class="content-scroll" scroll-y>
      <!-- 物品主图轮播 -->
      <swiper
        class="item-swiper"
        circular
        :indicator-dots="true"
        indicator-color="rgba(0, 0, 0, 0.2)"
        indicator-active-color="#2b85e4"
        indicator-size="8"
      >
        <swiper-item v-for="(image, index) in donationDetail?.images.split(',')" :key="index">
          <view class="swiper-item-container" @click="handlePreviewImage(index)">
            <image class="swiper-image" :src="image" mode="aspectFill"></image>
          </view>
        </swiper-item>
      </swiper>

      <!-- 增加物品种类信息 -->
      <view class="category-section">
        <view class="category-tag">{{ donationTypeName }}</view>
        <view class="item-time">捐赠时间：{{ donationDetail?.updateTime }}</view>
      </view>

      <!-- 物品位置信息 -->
      <view class="location-section">
        <view class="location-title">物品位置</view>
        <view class="location-path">
          <view class="location-house">
            <text class="location-label">爱心屋：</text>
            <text class="location-value">{{ donationDetail?.loveHouseName }}</text>
          </view>
          <view class="location-device">
            <text class="location-label">设备号：</text>
            <text class="location-value device">{{
              donationDetail?.goodsShelves.deviceNumber
            }}</text>
          </view>
          <view class="location-shelf">
            <text class="location-label">货架号：</text>
            <text class="location-value shelf">{{ donationDetail?.goodsShelves.shelfNumber }}</text>
          </view>
        </view>
      </view>

      <!-- 物品基本信息 -->
      <view class="item-info-section">
        <view class="info-title">物品描述</view>
        <view class="item-desc">{{ donationDetail?.description || '暂无描述' }}</view>
      </view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="action-bar">
      <button class="action-btn primary" @click="handleWantIt">我想要</button>
      <button class="action-btn collect" @click="handleCollect">
        <image
          class="collect-icon"
          :src="
            donationDetail?.isCollect == 1
              ? '/static/images/collect_light_up.svg'
              : '/static/images/collect.svg'
          "
          mode="aspectFit"
        ></image>
      </button>
    </view>
  </view>

  <!-- 自定义确认弹窗 -->
  <view class="custom-modal" v-if="showConfirmModal">
    <view class="modal-mask" @click="showConfirmModal = false"></view>
    <view class="modal-container">
      <view class="modal-card">
        <view class="modal-header">
          <text class="modal-title">温馨提示</text>
          <text class="modal-close" @click="showConfirmModal = false">×</text>
        </view>
        <view class="modal-content">
          <view class="content-text">确定想要该物品吗？</view>
          <view class="content-notice">
            <view class="notice-item">· 确认后将锁定该物品</view>
            <view class="notice-item">· 将扣除取货次数一次</view>
            <view class="notice-item">· 请在两天内取走该物品</view>
            <view class="notice-item">· 否则取货次数不返还</view>
          </view>
        </view>
        <view class="modal-footer">
          <button class="modal-btn cancel" @click="showConfirmModal = false">再想想</button>
          <button class="modal-btn confirm" @click="confirmWantIt">确定要</button>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.detail-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  position: relative;
  padding-bottom: 100rpx; // 为底部操作栏留出空间
}

// 自定义导航栏
.custom-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #fff;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);

  .nav-content {
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 24rpx;

    .nav-left {
      width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;

      text {
        font-size: 28px;
        font-weight: bold;
        color: #151516;
      }
    }

    .donor-info {
      display: flex;
      align-items: center;
      margin-left: 0;
      flex: 1;

      .donor-avatar {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        margin-right: 12rpx;
        flex-shrink: 0;
      }

      .donor-name {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 300rpx;
      }
    }

    .nav-right {
      width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      margin-left: auto;

      .iconfont {
        font-size: 20px;
        color: #333;
      }
    }
  }

  // 导航栏下方分割线
  .nav-divider {
    height: 6rpx;
    background: linear-gradient(
      to right,
      rgba(43, 133, 228, 0.1),
      rgba(43, 133, 228, 0.5),
      rgba(43, 133, 228, 0.1)
    );
    margin-top: 2rpx;
  }
}

.content-scroll {
  height: 100vh;
  box-sizing: border-box;
  // 为导航栏和轮播图之间添加间隔
  padding-top: calc(44px + var(--status-bar-height, 20px) + 16rpx);
}

// 物品轮播图
.item-swiper {
  width: 100%;
  height: 700rpx; // 调整高度
  background-color: #fff;
  position: relative;
  box-sizing: border-box;
  margin-bottom: 16rpx; // 添加底部间距
  border-radius: 12rpx;
  overflow: hidden; // 确保内容不溢出

  .swiper-item-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-image {
    width: 100%;
    height: 100%;
    object-fit: cover; // 修改为cover确保填充整个容器
  }
}

// 物品种类信息区域
.category-section {
  background-color: #fff;
  padding: 24rpx;
  border-radius: 12rpx;
  margin-bottom: 16rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  .category-tag {
    background-color: #e6f7ff;
    color: #1890ff;
    padding: 6rpx 20rpx;
    border-radius: 6rpx;
    font-size: 28rpx;
    font-weight: 500;
    border-left: 6rpx solid #1890ff;
  }

  .item-time {
    font-size: 24rpx;
    color: #999;
  }
}

// 位置信息区域
.location-section {
  padding: 24rpx;
  background-color: #fff;
  margin-bottom: 16rpx;
  border-radius: 12rpx; // 添加圆角

  .location-title {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 24rpx;
    font-weight: 500;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -8rpx;
      width: 40rpx;
      height: 4rpx;
      background-color: #2b85e4;
    }
  }

  .location-path {
    display: flex;
    flex-direction: column;
    gap: 16rpx;

    .location-house,
    .location-device,
    .location-shelf {
      display: flex;
      align-items: center;
    }

    .location-label {
      font-size: 26rpx;
      color: #666;
      width: 120rpx;
      flex-shrink: 0;
    }

    .location-value {
      font-size: 28rpx;
      font-weight: 500;
      color: #333;

      &.device {
        color: #ff9800;
        background-color: rgba(255, 152, 0, 0.1);
        padding: 4rpx 12rpx;
        border-radius: 4rpx;
      }

      &.shelf {
        color: #2b85e4;
        background-color: rgba(43, 133, 228, 0.1);
        padding: 4rpx 12rpx;
        border-radius: 4rpx;
      }
    }
  }
}

// 基本信息区域
.item-info-section {
  padding: 24rpx;
  background-color: #fff;
  margin-bottom: 16rpx;
  border-radius: 12rpx; // 添加圆角

  .info-title {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 16rpx;
    font-weight: 500;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -8rpx;
      width: 40rpx;
      height: 4rpx;
      background-color: #2b85e4;
      margin-bottom: 12rpx;
    }
  }

  .item-desc {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
    margin-top: 24rpx;
    white-space: pre-wrap;
  }
}

// 物品状态区域
.item-status-section {
  padding: 24rpx;
  background-color: #fff;
  margin-bottom: 16rpx;
  border-radius: 12rpx; // 添加圆角

  .status-title {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 16rpx;
  }

  .status-tags {
    display: flex;
    flex-wrap: wrap;

    .tag {
      display: inline-block;
      padding: 6rpx 20rpx;
      background-color: #f0f9ff;
      color: #2b85e4;
      font-size: 24rpx;
      border-radius: 6rpx;
      margin-right: 16rpx;
      margin-bottom: 10rpx;
    }
  }
}

// 备注区域
.note-section {
  padding: 24rpx;
  background-color: #fff;
  margin-bottom: 16rpx;
  border-radius: 12rpx; // 添加圆角

  .note-title {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 16rpx;
  }

  .note-content {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
    background-color: #f9f9f9;
    padding: 16rpx;
    border-radius: 8rpx;
  }
}

// 底部操作栏
.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  box-shadow: 0 -2rpx 6rpx rgba(0, 0, 0, 0.05);

  .action-btn {
    height: 70rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 35rpx;
    font-size: 28rpx;
    padding: 0 30rpx;

    &.primary {
      background-color: #2b85e4;
      color: #fff;
      flex: 1;
      margin-right: 20rpx;
    }

    &.collect {
      width: 70rpx;
      height: 70rpx;
      padding: 0;
      border-radius: 50%;
      background-color: transparent;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: none;
      border: none;

      .collect-icon {
        width: 44rpx;
        height: 44rpx;
      }
    }
  }
}

// 字体图标
@font-face {
  font-family: 'iconfont';
  src: url('data:application/x-font-woff2;charset=utf-8;base64,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');
  font-weight: normal;
  font-style: normal;
}

.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-back:before {
  content: '\e679';
}

.icon-more:before {
  content: '\e684';
}

// 自定义弹窗
.custom-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;

  .modal-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .modal-container {
    width: 100%;
    padding: 0 50rpx;
    position: relative;
    z-index: 1000;
  }

  .modal-card {
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1rpx solid #f5f5f5;

      .modal-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
      }

      .modal-close {
        font-size: 40rpx;
        color: #999;
        padding: 0 10rpx;
      }
    }

    .modal-content {
      padding: 40rpx 30rpx;

      .content-text {
        font-size: 30rpx;
        color: #333;
        text-align: center;
        margin-bottom: 30rpx;
      }

      .content-notice {
        background-color: #f8f9fa;
        padding: 20rpx 30rpx;
        border-radius: 10rpx;

        .notice-item {
          font-size: 28rpx;
          color: #666;
          line-height: 1.8;
        }
      }
    }

    .modal-footer {
      display: flex;
      padding: 20rpx 30rpx 40rpx;

      .modal-btn {
        flex: 1;
        height: 80rpx;
        border-radius: 40rpx;
        margin: 0 20rpx;
        font-size: 28rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        &.cancel {
          background-color: #f5f5f5;
          color: #666;
        }

        &.confirm {
          background-color: #2b85e4;
          color: #fff;
        }
      }
    }
  }
}
</style>
